<!DOCTYPE html>
<html lang="zh-cn" class="act">
<head>
<title>智慧幼儿园-中上</title>
<meta charset=utf-8>
<meta name="keywords" content="智慧幼儿园">
<meta name="description" content="智慧幼儿园">
<meta name="author" content="本站由杭州翰臣科技有限公司进行全程策划/页面设计/程序开发完成.24小时技术支持——翰臣科技：http://www.68team.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/swiper.css">
<link rel="stylesheet" href="css/mulu16.css">
</head>
<body ontouchstart>

	<!-- 最外侧框架 -->
	<div class="iall">
		<!-- 背景图 定义页面宽高 -->
		<img src="images/in_1.jpg" alt="智慧幼儿园">


		<!-- 目录版块 -->
		<div class="mulu dwcj">
			<img src="images/mulu/mulu_1.jpg" alt="智慧幼儿园">
			<img src="images/mulu/mu_1bg.png" class="c" alt="智慧幼儿园">
			
			<!-- 鸟 -->
			<ul class="niao">
				<li class="li1"> 
					<img src="images/mulu/niao_1_1.png" alt="智慧幼儿园">
				</li>
				<li class="li2"> 
					<img src="images/mulu/niao_2_1.png" alt="智慧幼儿园">
				</li>
			</ul>
			<!-- 目录背景 -->
			<div class="imgbg c">
				<img src="images/mulu/bg_1_3.png" alt="智慧幼儿园">
			</div>

			<!-- 目录文字 -->
			<ul class="wenzi">
				<li class="li1"  data-bt="images/mulu/bt_16_01.png">
					<img src="images/mulu/mu_16_1.png" alt="智慧幼儿园">
				</li>
				<li class="li2"  data-bt="images/mulu/bt_16_03.png">
					<img src="images/mulu/mu_16_2.png" alt="智慧幼儿园">
				</li>
				<li class="li3"  data-bt="images/mulu/bt_16_02.png">
					<img src="images/mulu/mu_16_3.png" alt="智慧幼儿园">
				</li>
				<li class="li4"  data-bt="">
					<img src="images/mulu/mu_16_4.png" alt="智慧幼儿园">
				</li>
			</ul>

			<!-- 标题 -->

			<div class="biaoti">
				<img src="images/mulu/bt_16.png" alt="智慧幼儿园">
			</div>

			<!-- 返回 -->
			<div class="fh unfh" id="ace">
				<div class="anniu ">
					<img  src="images/zhuti/mp3bg.png" alt="智慧幼儿园">
					<img  src="images/zhuti/fh.png" class="th" alt="智慧幼儿园">
				</div>
			</div>




		</div>



		<!-- 目录详情版块 -->
		<div class="muxq dwcj">
			<img src="images/muluxq/mulu_1.jpg" alt="智慧幼儿园">

			<div class="muxqbox">
				<img src="images/muluxq/mulu_2.jpg" alt="智慧幼儿园">
				<!-- 标题文字 -->
				<img src="" class="biaotiwenzi" alt="智慧幼儿园">
				<dl class="muxqdl">
					<dd class="dd1">
						<img src="images/muluxq/mulu_16_1.jpg" alt="智慧幼儿园">
						<!-- 弹窗轮播 -->
						<ul class="lb_tanchuang one">
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>

					</dd>
					<dd class="dd2">
						<img src="images/muluxq/mulu_16_2.jpg" alt="智慧幼儿园">
						<!-- 弹窗轮播 -->
						<ul class="lb_tanchuang two">
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</dd>
					<dd class="dd3">
						<video src="video/muxq/zcnll/1.mp4" controls></video>
					</dd>
					<dd class="dd4">
						<img src="images/muluxq/mulu_16_3.jpg" alt="智慧幼儿园">
						<!-- 弹窗轮播 -->
						<ul class="lb_tanchuang three">
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</dd>
					
				</dl>


				<!-- 弹窗轮播 -->
				<!-- 四大发明 -->
				<div class="tanhcuang_lb tanhcuang_lb1">
					<div class="swiper-container swiper_tclb swiper_tclb1 stop-swiping1 " >
						
						<div class="swiper-wrapper">
							
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_16_4.jpg" alt="智慧幼儿园">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_16_5.jpg" alt="智慧幼儿园">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_16_6.jpg" alt="智慧幼儿园">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_16_7.jpg" alt="智慧幼儿园">
								</div>
							</div>
						</div>
					</div>
					<ul class="lbbtn alltime">
						<li class="li1 prev_lb prev_lb1" >
							<img src="images/muluxq/lbbtn.png" alt="智慧幼儿园">
						</li>
						<li class="li1 next_lb next_lb1"  >
							<img src="images/muluxq/lbbtn.png" alt="智慧幼儿园">
						</li>
					</ul>

					<div class="out alltime">
						<img src="images/muluxq/out.png" alt="智慧幼儿园">
					</div>
				</div>

				<!-- 弹窗轮播 -->
				<!-- 纸的博览会 -->
				<div class="tanhcuang_lb tanhcuang_lb2">
					<div class="swiper-container swiper_tclb swiper_tclb2 stop-swiping2 " >
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_16_8.jpg" alt="智慧幼儿园">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_16_9.jpg" alt="智慧幼儿园">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_16_10.jpg" alt="智慧幼儿园">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_16_11.jpg" alt="智慧幼儿园">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_16_12.jpg" alt="智慧幼儿园">
								</div>
							</div>
						</div>
					</div>
					<ul class="lbbtn alltime">
						<li class="li1 prev_lb prev_lb2" >
							<img src="images/muluxq/lbbtn.png" alt="智慧幼儿园">
						</li>
						<li class="li1 next_lb next_lb2"  >
							<img src="images/muluxq/lbbtn.png" alt="智慧幼儿园">
						</li>
					</ul>

					<div class="out alltime">
						<img src="images/muluxq/out.png" alt="智慧幼儿园">
					</div>
				</div>


				<!-- 弹窗轮播 -->
				<!-- 纸的用途 -->
				<div class="tanhcuang_lb tanhcuang_lb3">
					<div class="swiper-container swiper_tclb swiper_tclb3 stop-swiping3 " >
						
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_16_13.jpg" alt="智慧幼儿园">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_16_14.jpg" alt="智慧幼儿园">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_16_15.jpg" alt="智慧幼儿园">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_16_16.jpg" alt="智慧幼儿园">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="sbox">
									<img src="images/muluxq/mulu_16_17.jpg" alt="智慧幼儿园">
								</div>
							</div>
						</div>
					</div>
					<ul class="lbbtn alltime">
						<li class="li1 prev_lb prev_lb3" >
							<img src="images/muluxq/lbbtn.png" alt="智慧幼儿园">
						</li>
						<li class="li1 next_lb next_lb3"  >
							<img src="images/muluxq/lbbtn.png" alt="智慧幼儿园">
						</li>
					</ul>

					<div class="out alltime">
						<img src="images/muluxq/out.png" alt="智慧幼儿园">
					</div>
				</div>
			</div>	
			

			<!-- 返回 -->
			<div class="fh xqfh">
				<div class="anniu ">
					<img  src="images/zhuti/mp3bg.png" alt="智慧幼儿园">
					<img  src="images/zhuti/fh.png" class="th" alt="智慧幼儿园">
				</div>
			</div>

			
		</div>














	</div>




	<script type='text/javascript' src='js/jquery-3.5.1.min.js'></script>
	<script type='text/javascript' src='js/swiper.min.js'></script>
	<script type="text/javascript">


		$(function(){
			// 鸟图片替换
			function yazi1() {
				var fish = 1
				var fishTotal = 2

				setInterval(function() {
					fish++
					if (fish > fishTotal) fish = 1
					$('.mulu .niao .li1 img').attr('src', 'images/mulu/niao_1_' + fish + '.png');
					
				}, 200)
				setInterval(function() {
					fish++
					if (fish > fishTotal) fish = 1
					$('.mulu .niao .li2 img').attr('src', 'images/mulu/niao_2_' + fish + '.png');
					
				}, 300)
			}
			yazi1();



			// 目录关闭父页面iframe 弹窗
			var ace = document.getElementById('ace');
			ace.addEventListener('click',function(){
				var fun="click";
				window.parent.postMessage(fun,'*');
			})


			

			// 点击显示详情
			$('.mulu .wenzi li').on('click',function(){
				var idx=$(this).index();
				$('.iall .muxq ').show();
				$('.muxq .muxqdl dd').eq(idx).show().siblings().hide();
				// 框架标题文字
				var biaotiwenzi=$(this).attr('data-bt');
				if(biaotiwenzi!=''){
					$('.muxq .biaotiwenzi').show().attr({'src':biaotiwenzi});
				}else{
					$('.muxq .biaotiwenzi').hide();
				}
				// 显示对应版块

				if(idx==2){
					$(' .muxq .muxqdl .dd3 video').attr({src:"video/muxq/zcnll/1.mp4"}).trigger('play');
				}

			})


		

			// 弹窗轮播
			//四大发明
			var swiper_tclb1;
			swiper_tclb1 = new Swiper('.swiper_tclb1', {
				speed:1000,
				centeredSlides : true,
				slidesPerView: 1,
				paginationClickable: true,
				spaceBetween: 0,
				autoplayDisableOnInteraction : false,
				noSwiping : true,
				noSwipingClass : 'stop-swiping1',
				prevButton:'.prev_lb1',
				nextButton:'.next_lb1',
				
			});
			$('.muxq .one li').on('click',function(){
				$('.muxq .tanhcuang_lb1').show();
				var idx=$(this).index();
				swiper_tclb1.destroy(true,true);
				swiper_tclb1 = new Swiper('.swiper_tclb1', {
					speed:1000,
					centeredSlides : true,
					slidesPerView: 1,
					paginationClickable: true,
					spaceBetween: 0,
					autoplayDisableOnInteraction : false,
					noSwiping : true,
					noSwipingClass : 'stop-swiping1',
					prevButton:'.prev_lb1',
					nextButton:'.next_lb1',
					
				});
				swiper_tclb1.slideTo(idx, 10, false);
			})


			// 纸的博览会
			var swiper_tclb2;
			swiper_tclb2 = new Swiper('.swiper_tclb2', {
				speed:1000,
				centeredSlides : true,
				slidesPerView: 1,
				paginationClickable: true,
				spaceBetween: 0,
				autoplayDisableOnInteraction : false,
				noSwiping : true,
				noSwipingClass : 'stop-swiping2',
				prevButton:'.prev_lb2',
				nextButton:'.next_lb2',
				
			});
			$('.muxq .two li').on('click',function(){
				$('.muxq .tanhcuang_lb2').show();
				var idx=$(this).index();
				swiper_tclb2.destroy(true,true);
				swiper_tclb2 = new Swiper('.swiper_tclb2', {
					speed:1000,
					centeredSlides : true,
					slidesPerView: 1,
					paginationClickable: true,
					spaceBetween: 0,
					autoplayDisableOnInteraction : false,
					noSwiping : true,
					noSwipingClass : 'stop-swiping2',
					prevButton:'.prev_lb2',
					nextButton:'.next_lb2',
					
				});
				swiper_tclb2.slideTo(idx, 10, false);
			})


			//纸的用途
			var swiper_tclb3;
			swiper_tclb3 = new Swiper('.swiper_tclb3', {
				speed:1000,
				centeredSlides : true,
				slidesPerView: 1,
				paginationClickable: true,
				spaceBetween: 0,
				autoplayDisableOnInteraction : false,
				noSwiping : true,
				noSwipingClass : 'stop-swiping3',
				prevButton:'.prev_lb3',
				nextButton:'.next_lb3',
				
			});
			$('.muxq .three li').on('click',function(){
				$('.muxq .tanhcuang_lb3').show();
				var idx=$(this).index();
				swiper_tclb3.destroy(true,true);
				swiper_tclb3 = new Swiper('.swiper_tclb3', {
					speed:1000,
					centeredSlides : true,
					slidesPerView: 1,
					paginationClickable: true,
					spaceBetween: 0,
					autoplayDisableOnInteraction : false,
					noSwiping : true,
					noSwipingClass : 'stop-swiping3',
					prevButton:'.prev_lb3',
					nextButton:'.next_lb3',
					
				});
				swiper_tclb3.slideTo(idx, 10, false);
			})


			$('.muxq .tanhcuang_lb .out').on('click',function(){
				$('.muxq .tanhcuang_lb').hide();
			})
		

			

			

			// 详情关闭弹窗
			$('body').on('click','.iall .muxq  .fh',function(){
				$('.muxq .muxqdl .dd3 video').trigger('pause');
				$('.iall .muxq ').hide();
				$('.muxq .tanhcuang_lb').hide();
			})












		})

		

	</script>
</body>

</html>